<template>
	<view class="u-search" @tap="clickHandler" :style="{
		margin: margin,
	}">
		<view
			class="u-content"
			:style="{
				backgroundColor: bgColor,
				borderRadius: shape == 'round' ? '100rpx' : '10rpx',
				border: borderStyle,
				height: height + 'rpx'
			}"
		>
			<view class="u-icon-wrap">
				<u-icon class="u-clear-icon" :size="30" :name="searchIcon" :color="searchIconColor ? searchIconColor : color"></u-icon>
			</view>
			<input
				confirm-type="search"
				@blur="blur"
				:value="value"
				@confirm="search"
				@input="inputChange"
				:disabled="disabled"
				@focus="getFocus"
				:focus="focus"
				:maxlength="maxlength"
				placeholder-class="u-placeholder-class"
				:placeholder="placeholder"
				:placeholder-style="`color: ${placeholderColor}`"
				class="u-input"
				type="text"
				:style="[{
					textAlign: inputAlign,
					color: color,
					backgroundColor: bgColor,
				}, inputStyle]"
			/>
			<view class="u-close-wrap" v-if="keyword && clearabled && focused" @tap="clear">
				<u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon>
			</view>
		</view>
		<view :style="[actionStyle]" class="u-action" 
			:class="[showActionBtn || show ? 'u-action-active' : '']" 
			@tap.stop.prevent="custom"
		>{{ actionText }}</view>
	</view>
</template>

<script>

export default {
	name: "u-search",
	props: {
		
		shape: {
			type: String,
			default: 'round'
		},
		
		bgColor: {
			type: String,
			default: '#f2f2f2'
		},
		
		placeholder: {
			type: String,
			default: '请输入关键字'
		},
		
		clearabled: {
			type: Boolean,
			default: true
		},
		
		focus: {
			type: Boolean,
			default: false
		},
		
		showAction: {
			type: Boolean,
			default: true
		},
		
		actionStyle: {
			type: Object,
			default() {
				return {};
			}
		},
		
		actionText: {
			type: String,
			default: '搜索'
		},
		
		inputAlign: {
			type: String,
			default: 'left'
		},
		
		disabled: {
			type: Boolean,
			default: false
		},
		
		animation: {
			type: Boolean,
			default: false
		},
		
		borderColor: {
			type: String,
			default: 'none'
		},
		
		value: {
			type: String,
			default: ''
		},
		
		height: {
			type: [Number, String],
			default: 64
		},
		
		inputStyle: {
			type: Object,
			default() {
				return {}
			}
		},
		
		maxlength: {
			type: [Number, String],
			default: '-1'
		},
		
		searchIconColor: {
			type: String,
			default: ''
		},
		
		color: {
			type: String,
			default: '#606266'
		},
		
		placeholderColor: {
			type: String,
			default: '#909399'
		},
		
		margin: {
			type: String,
			default: '0'
		},
		
		searchIcon: {
			type: String,
			default: 'search'
		}
	},
	data() {
		return {
			keyword: '',
			showClear: false, 
			show: false,
			
			focused: this.focus
			
			
		};
	},
	watch: {
		keyword(nVal) {
			
			this.$emit('input', nVal);
			
			this.$emit('change', nVal);
		},
		value: {
			immediate: true,
			handler(nVal) {
				this.keyword = nVal;
			}
		}
	},
	computed: {
		showActionBtn() {
			if (!this.animation && this.showAction) return true;
			else return false;
		},
		
		borderStyle() {
			if (this.borderColor) return `1px solid ${this.borderColor}`;
			else return 'none';
		},
	},
	methods: {
		
		inputChange(e) {
			this.keyword = e.detail.value;
		},
		
		
		clear() {
			this.keyword = '';
			
			this.$nextTick(() => {
				this.$emit('clear');
			})
		},
		
		search(e) {
			this.$emit('search', e.detail.value);
			try{
				
				uni.hideKeyboard();
			}catch(e){}
		},
		
		custom() {
			this.$emit('custom', this.keyword);
			try{
				
				uni.hideKeyboard();
			}catch(e){}
		},
		
		getFocus() {
			this.focused = true;
			
			if (this.animation && this.showAction) this.show = true;
			this.$emit('focus', this.keyword);
		},
		
		blur() {
			
			
			setTimeout(() => {
				this.focused = false;
			}, 100)
			this.show = false;
			this.$emit('blur', this.keyword);
		},
		
		clickHandler() {
			if(this.disabled) this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-search {
	@include vue-flex;
	align-items: center;
	flex: 1;
}

.u-content {
	@include vue-flex;
	align-items: center;
	padding: 0 18rpx;
	flex: 1;
}

.u-clear-icon {
	@include vue-flex;
	align-items: center;
}

.u-input {
	flex: 1;
	font-size: 28rpx;
	line-height: 1;
	margin: 0 10rpx;
	color: $u-tips-color;
}

.u-close-wrap {
	width: 40rpx;
	height: 100%;
	@include vue-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.u-placeholder-class {
	color: $u-tips-color;
}

.u-action {
	font-size: 28rpx;
	color: $u-main-color;
	width: 0;
	overflow: hidden;
	transition: all 0.3s;
	white-space: nowrap;
	text-align: center;
}

.u-action-active {
	width: 80rpx;
	margin-left: 10rpx;
}
</style>
